<template>
  <div class="home">
    <add @add="fun1"></add>
    <list :list="list" @change="change" @remove="remove"></list>
  </div>
</template>

<script>
import add from "../components/Add.vue";
import list from "../components/List.vue";
export default {
  data() {
    return {
      list: [
        {
          title: "任务一吃饭",
          status: false,
        },
        {
          title: "任务二睡觉",
          status: false,
        },
        {
          title: "任务三打豆豆",
          status: true,
        },
      ],
    };
  },
  mounted() {
    if (localStorage.getItem("list")) {
      this.list = JSON.parse(localStorage.getItem("list"));
    }
  },
  //在进入页面的时候 如果本地存储中有list 数据 就从本地存储中拿
  components: {
    add,
    list,
  },
  // 注册子组件 add 和 列表
  methods: {
    fun1(val) {
      this.list.push({ title: val, status: false });
    },
    //传给子组件 add 的添加方法
    change(index) {
      this.list[index].status = !this.list[index].status;
    },
    //传给子组件list的方法，用来切换已完成未完成的状态
    remove(index) {
      this.list.splice(index, 1);
    },
    //传给子组件list的方法 用来删除
  },

  watch: {
    list: {
      handler(newval) {
        localStorage.setItem("list", JSON.stringify(newval));
      },
      deep: true, //开启深度监听
    },
  },
  //监听list的变化 ，一旦改变就存在本地存储中
};
</script>
